<template>
  <div style="width:70%; margin:0 auto; background:#cccabb;">
    <div v-html="data.writtenData.title" style="border-left:1px; padding:30px;
          width:100%; font-size:25px; color:black; font-weight:bolder"></div>
    <div style="display: flex; justify-content: center; align-items: center;">
      <img :src="data.writtenData.userAvatar" alt="头像.jpg"  style="width:35px; height:35px; border-radius:50%;"/>
      <div style="margin-left:5px; font-size:18px">
                <span class="clickable-text" @click="handleUserClick(data.writtenData.userId)">
                  {{ data.writtenData.userName }}
                </span>
      </div>
      <div style="margin-left:5px; font-size:10px; color:#988888">{{data.writtenData.time}}</div>
    </div>
    <div style="display:flex; justify-content: center; align-content: center; font-size:17px; color:#4ca34c">
      <span>贴子分类：</span>
      {{ data.writtenData.categoryTitle }}</div>
    <img :src="data.writtenData.img" alt="" style="display:flex; justify-content:center; width:500px; height:300px; margin:20px auto;">
    <div v-html="data.writtenData.content" style="padding:40px; width:60%; margin:0 auto"></div>
<!--   路由跳转（废案） <div>
      <el-button type="primary" @click="router.push({ name: 'CommentDetail', query: { id: data.writtenId } })">查看评论详情</el-button>
    </div>
    <div style="flex: 1; padding:0; margin: 0; background-color: #e1dddd" >
      <RouterView />
    </div>-->
    <div class="comment-system">
      <div style="margin-top: 30px">
        <!-- 集成评论组件 -->
        <CommentSection
            v-if="data.writtenData.id"
            :writtenId="data.writtenId"/>
<!--            @comment-submitted="loadComments"
        />-->
      </div>
    </div>
  </div>

</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import CommentSection from "./CommentSection.vue";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || '{}'),
  writtenId: router.currentRoute.value.query.id,
  writtenData: {},

})

const loadWritten = () => {
  const id = data.writtenId;
  request.get("/written/selectById/" + id).then(res => {
    if (res.code === '200') {
      data.writtenData = res.data;
    }else{
      ElMessage.error(res.msg)
    }
  })
}
loadWritten()

/*// 加载评论
const loadComments = async () => {
  const res = await request.get(`/comment/written?writtenId=` + data.writtenId)
  comments.value = buildTree(res.data)
}

onMounted(loadComments)*/

const handleUserClick = (row) => {
  const userId = String(row)
    router.push({ path: `/front/otherperson/${userId}`})
}

</script>

<style scoped>
.comment-system {
  border-top: 1px solid #e1e1e1;
  padding: 20px;
  background: white;
  margin-top: 30px;
}
.clickable-text {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.clickable-text:hover {
  color: #3375b9;
}
</style>